<template>
  <div id="box">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        :label="$t('RegTable_name')">
<!--        label="Name">-->
      </el-table-column>
      <el-table-column
        prop="url"
        :label="$t('RegTable_url')">
      </el-table-column>
      <el-table-column
        :label="$t('RegTable_operation')">
        <template slot-scope="item">
          <el-popover
            placement="right"
            width="400"
            trigger="click">
              <el-form ref="form" size="mini" :model="form" label-width="80px">
                <el-form-item   :label="$t('RegTable_username')">
                  <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item :label="$t('RegTable_password')">
                  <el-input v-model="form.password" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="background: #067FB5; color: #fff;" @click="hubsevelogin">{{$t('RegTable_Modifynow')}}</el-button>
                </el-form-item>
              </el-form>
            <el-button style="background: #067FB5; color: #fff;" size="mini" slot="reference" @click="dataseve(item.row)">{{$t('RegTable_modify')}}</el-button>
          </el-popover>
          <el-button type="danger" size="mini" @click="hubdel(item.row.name)" style="margin-left: 5px">{{$t('RegTable_delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Vue from 'vue'
import { Table, TableColumn, Popover, Form, FormItem } from 'element-ui'
import http from '@/utils/http'
import { Base64 } from 'js-base64'
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Popover)
Vue.use(FormItem)
Vue.use(Form)
export default {
  data () {
    return {
      // 注册表列表数据
      tableData: null,
      // 修改注册表表单绑定数据
      form: {
        name: '',
        username: '',
        password: '',
        url: '',
        authentication: null
      }
    }
  },
  // 父组件传来的状态
  props: ['ins'],
  watch: {
    // ins状态改变时重新请求数据
    ins: function () {
      this.fetchdata()
    }
  },
  // 进入页面
  mounted () {
    this.fetchdata()
  },
  methods: {
    // 修改注册表时数据验证登录是否成功
    hubsevelogin () {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const data = {
        username: this.form.username,
        password: this.form.password,
        serveraddress: this.form.url
      }
      const docker = `curl --unix-socket /var/run/docker.sock -s -H "Content-Type:application/json" -d '${JSON.stringify(data)}' -X POST "http:/v1.40/auth"`
      http({
        url: '/docker',
        method: 'POST',
        timeout: 2000000,
        data: {
          docker
        }
      }).then(res => {
        if (res.Code === 200) {
          if (JSON.parse(res.Data).message) {
            this.loading.close()
            return this.$message({
              showClose: true,
              message: JSON.parse(res.Data).message,
              type: 'error'
            })
          }
          this.hubseve()
        } else {
          this.loading.close()
          this.$message({
            showClose: true,
            message: '用户名或密码错误，请重试！',
            type: 'error'
          })
        }
      }).catch((err) => {
        return err
      })
    },
    // 修改注册表 添加到数据库
    hubseve () {
      const adddata = {
        name: this.form.name,
        username: this.form.username,
        password: Base64.encode(this.form.password),
        url: this.form.url,
        authentication: true
      }
      http({
        url: '/hubsave',
        method: 'POST',
        timeout: 2000000,
        data: {
          ...adddata
        }
      }).then(res => {
        this.loading.close()
        if (res.Code === 200) {
          this.$message({
            showClose: true,
            message: '注册表修改成功！',
            type: 'success'
          })
          this.fetchdata()
          document.getElementById('box').click()
        } else {
          this.$message({
            showClose: true,
            message: '注册表修改失败，请稍候再试！',
            type: 'error'
          })
        }
      }).catch((err) => {
        return err
      })
    },
    // 修改注册表时数据回填
    dataseve (data) {
      this.form.name = data.name
      this.form.username = data.username
      this.form.password = Base64.decode(data.password)
      this.form.url = data.url
    },
    // 删除注册表
    hubdel (name) {
      if (confirm('确认删除？')) {
        http({
          url: '/hubdel',
          method: 'POST',
          timeout: 2000000,
          data: {
            name
          }
        }).then(res => {
          if (res.Code === 200) {
            this.$message({
              showClose: true,
              message: '删除成功！',
              type: 'success'
            })
            this.fetchdata()
          } else {
            this.$message({
              showClose: true,
              message: '删除失败，请稍候再试！',
              type: 'error'
            })
          }
        }).catch((err) => {
          return err
        })
      }
    },
    // 请求数据
    fetchdata () {
      http({
        url: '/hubfind',
        method: 'GET',
        timeout: 2000000
      }).then(res => {
        if (res.Code === 200) {
          this.tableData = res.Data
        }
      }).catch((err) => {
        return err
      })
    }
  }
}
</script>
